<template>
  <div class="mainBox">
    <div class="returnBox">
      <el-button @click="returnBtn">返回</el-button>
    </div>
    <div class="mainContain">
      <div class="mainContainLeft">
        <el-image
          style="width: 100px; height: 100px"
          :src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
          :fit="cover"
        />
        <span>name</span>
        <el-button
          type="primary"
          size="small"
          style="background: red; border: none"
          @click="clickEditor"
          >编辑资料</el-button
        >
      </div>
      <div class="mainContainRight">
        <el-descriptions :column="2" border>
          <el-descriptions-item
            label="Username"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item
            label="Telephone"
            label-align="right"
            align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item
            label="Username"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item
            label="Telephone"
            label-align="right"
            align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item
            label="Username"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item
            label="Telephone"
            label-align="right"
            align="center"
            >18100000000</el-descriptions-item
          >
          <el-descriptions-item label="Place" label-align="right" align="center"
            >Suzhou</el-descriptions-item
          >
          <el-descriptions-item
            label="Remarks"
            label-align="right"
            align="center"
          >
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="mainTwo">
      <headerTwo style="width: 98.6%"> 统计信息</headerTwo>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="本月新增会员" width="150" />
        <el-table-column prop="name" label="本月付费会员" width="150" />
        <el-table-column prop="name" label="本月销售" width="150" />
        <el-table-column prop="name" label="上月销售" width="150" />
        <el-table-column prop="name" label="本月转化率" width="150" />
        <el-table-column prop="name" label="本月上课数" width="150" />
        <el-table-column prop="name" label="上课预约率" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from "../../router";
import headerTwo from "./headerTwoView.vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const returnBtn: any = function () {
  router.push("/mainView/ListCoaches/listcoachesOne");
};
const clickEditor: any = function () {
  router.push("/mainView/ListCoaches/listcoachesThree");
};
</script>

<style scoped>
.mainBox {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}
.returnBox {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
.mainContain {
  width: 100%;
  display: flex;
}
.mainContainLeft {
  width: 25%;
  border: 1px solid #ebeef5;
  border-right: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mainContainRight {
  width: 75%;
}
.mainTwo {
  width: 100%;
  margin-top: 40px;
}
</style>
